<template>
  <div class="pagination">
    <button 
      class="page-btn prev" 
      :disabled="current === 1"
      @click="handlePrev"
    >
      <i class="fas fa-chevron-left"></i>
    </button>
    
    <div class="page-numbers">
      <button 
        v-if="displayPages[0] > 1"
        class="page-number"
        :class="{ active: 1 === current }"
        @click="handlePageClick(1)"
      >
        1
      </button>
      
      <button
        v-if="displayPages[0] > 2"
        class="page-number quick-jump"
        @mouseover="quickPrevHover = true"
        @mouseleave="quickPrevHover = false"
        @click="handleQuickPrev"
      >
        <i v-if="quickPrevHover" class="fas fa-angle-double-left"></i>
        <span v-else>...</span>
      </button>
      
      <button 
        v-for="page in displayPages" 
        :key="page"
        class="page-number"
        :class="{ active: page === current }"
        @click="handlePageClick(page)"
      >
        {{ page }}
      </button>
      
      <button
        v-if="displayPages[displayPages.length - 1] < total - 1"
        class="page-number quick-jump"
        @mouseover="quickNextHover = true"
        @mouseleave="quickNextHover = false"
        @click="handleQuickNext"
      >
        <i v-if="quickNextHover" class="fas fa-angle-double-right"></i>
        <span v-else>...</span>
      </button>
      
      <button 
        v-if="displayPages[displayPages.length - 1] < total"
        class="page-number"
        :class="{ active: total === current }"
        @click="handlePageClick(total)"
      >
        {{ total }}
      </button>
    </div>
    
    <button 
      class="page-btn next"
      :disabled="current === total"
      @click="handleNext"
    >
      <i class="fas fa-chevron-right"></i>
    </button>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    total: {
      type: Number,
      required: true
    },
    current: {
      type: Number,
      default: 1
    },
    maxDisplay: {
      type: Number,
      default: 5
    },
    quickJumpSize: {
      type: Number,
      default: 5
    }
  },
  computed: {
    displayPages() {
      const pages = []
      const halfDisplay = Math.floor(this.maxDisplay / 2)
      let start = Math.max(1, this.current - halfDisplay)
      let end = Math.min(this.total, start + this.maxDisplay - 1)
      
      if (end - start + 1 < this.maxDisplay) {
        start = Math.max(1, end - this.maxDisplay + 1)
      }
      
      for (let i = start; i <= end; i++) {
        pages.push(i)
      }
      
      return pages
    }
  },
  data() {
    return {
      quickPrevHover: false,
      quickNextHover: false
    }
  },
  methods: {
    handlePageClick(page) {
      if (page !== this.current) {
        this.$emit('change', page)
      }
    },
    handlePrev() {
      if (this.current > 1) {
        this.$emit('change', this.current - 1)
      }
    },
    handleNext() {
      if (this.current < this.total) {
        this.$emit('change', this.current + 1)
      }
    },
    handleQuickPrev() {
      const targetPage = Math.max(1, this.current - this.quickJumpSize)
      this.$emit('change', targetPage)
    },
    handleQuickNext() {
      const targetPage = Math.min(this.total, this.current + this.quickJumpSize)
      this.$emit('change', targetPage)
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: $spacing-sm;
  margin: $spacing-xl 0;

  .page-btn {
    padding: $spacing-sm $spacing-md;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    border-radius: $border-radius-md;
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 0.9rem;
    box-shadow: none;

    &:hover:not(:disabled) {
      border-color: $primary;
      color: $primary;
      background: rgba($primary, 0.1);
      transform: translateY(-1px);
    }

    &:active:not(:disabled) {
      transform: translateY(0);
    }

    &:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
  }

  .page-numbers {
    display: flex;
    gap: $spacing-xs;
    align-items: center;

    .quick-jump {
      position: relative;
      overflow: hidden;
      background: transparent;
      
      &:hover {
        border-color: $primary;
        color: $primary;
        background: rgba($primary, 0.1);
      }

      i, span {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        transition: all 0.25s ease;
      }

      i {
        opacity: 0;
        transform: translate(-50%, 100%);
        font-size: 0.85rem;
      }

      span {
        opacity: 1;
      }

      &:hover {
        i {
          opacity: 1;
          transform: translate(-50%, -50%);
        }

        span {
          opacity: 0;
          transform: translate(-50%, -100%);
        }
      }
    }

    .page-number {
      min-width: 32px;
      height: 32px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--text-primary);
      border-radius: $border-radius-md;
      cursor: pointer;
      transition: all 0.25s ease;
      font-weight: 500;
      font-size: 0.9rem;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: none;

      &:hover:not(.active) {
        border-color: $primary;
        color: $primary;
        background: rgba($primary, 0.1);
        transform: translateY(-1px);
      }

      &:active:not(.active) {
        transform: translateY(0);
      }

      &.active {
        background: $primary;
        color: white;
        border-color: $primary;
        transform: none;
      }
    }
  }
}

@include responsive(sm) {
  .pagination {
    gap: $spacing-xs;

    .page-btn {
      padding: $spacing-xs;
    }

    .page-numbers {
      .page-number {
        min-width: 28px;
        height: 28px;
        font-size: 0.85rem;
      }
    }
  }
}
</style> 